Variable fonts are here. Now what? 可變字型到底好在哪？

可變字型早在 2016 年就出現了，現在所有主流瀏覽器都已經支援它，但很多人還不太清楚它到底有什麼實用價值。這篇文章就從技術優勢、設計最佳化和創意玩法三個方面，告訴大家為什麼要用可變字型，以及怎麼用。

1. 更快、更省、更簡單（技術上的好處）

• 載入速度更快：普通的網頁字型需要一個檔案對應一個字重（比如加粗、細體等），但可變字型只用一個檔案，就能隨意調整字重、字寬等，減少伺服器請求，讓網頁載入更快。

• 管理更簡單：想要改一下標題的字寬？可變字型只需要改一個引數，而不用重新換字型檔案，設計調整更方便。

• 自動適配環境：比如，有些瀏覽器支援讓字型根據螢幕大小自動調整，這樣在不同裝置上看起來都舒服。

• 備用方案更好：如果網頁上的可變字型載入失敗，作業系統自帶的可變字型可以作為備用，讓頁面的文字不會亂掉。

2. 設計更靈活（讓排版更好看）

• 適應不同螢幕大小：普通字型大小是固定的，可變字型可以隨著螢幕大小調整字形，比如手機螢幕小，字型可以變窄一點，讓內容更好排版。

• 讓互動動畫更流暢：比如滑鼠懸停在某個按鈕上時，按鈕的字型可以逐漸加粗，而不是突然變粗，過渡更自然。

• 更適合不同的閱讀環境：黑暗模式、光線感測器、使用者的個性化設定……可變字型都能適配，讓閱讀更舒服。

3. 更有創意（玩出更多花樣）

• 超炫的字型動畫：有些可變字型支援“多路複用”效果，比如滑鼠懸停時，字型的筆畫可以變粗變細，或者字母可以漸變變化，看起來特別酷。

• 做漸變效果：比如一行字的前半部分是細體，後半部分逐漸變粗，這種漸變效果用普通字型很難實現。

• 可變彩色字型：可變字型還能結合彩色字型技術，讓字型顏色和形狀一起變化，做出更炫酷的效果。

• 字型還能“聽”你說話？ 可變字型不僅能響應滑鼠和滾動操作，還可以根據聲音、光線、甚至天氣變化調整字型樣式，比如頁面可以根據時間自動調整字重，讓早晨的字型看起來更輕盈，晚上更厚重。